import React, { useState } from 'react';
import { Image, Row, Col } from 'antd';
import styles from './index.less';

export default ({ model }) => {
  const [visible, setVisible] = useState(false);
  return (
    <Row wrap={false}>
      <Col flex="150px">
        {model.images?.length ? (
          <Image
            preview={{ visible: false }}
            width={130}
            height={140}
            src={model.images?.[0].preview || model.images?.[0].url}
            onClick={() => setVisible(true)}
          />
        ) : null}
        <div style={{ display: 'none' }}>
          <Image.PreviewGroup preview={{ visible, onVisibleChange: (vis) => setVisible(vis) }}>
            {model.images?.map((x) => (
              <Image key={x.url} src={x.preview || x.url} preview={{ src: x.url }} />
            ))}
          </Image.PreviewGroup>
        </div>
      </Col>
      <Col flex="auto">
        <Row>
          <Col span={24} className={styles.slickTitle}>
            {model.title}
          </Col>
        </Row>
        <Row>
          <Col span={24}>{model.author}</Col>
        </Row>
        <Row>
          <Col span={24} className={styles.memo}>
            {model.memo}
          </Col>
        </Row>
      </Col>
    </Row>
  );
};
